<template>
	<div class="outClass" ref="out">        
        <span v-if="!isExceeded" class="inClass" ref="in">{{content}}</span>          
        <span v-else :class="marqueeStyleClass" :style="marqueeStyle" ref="in">{{content}}{{content}}</span>         
	</div>
</template>
<script>
import Vue from 'vue'
export default {
    name: 'MarqueeText',
    props: {
        value:Object,
        content: {
            type:String,
            default:''
        },
    },
    data() {
        return {
            isExceeded:false,
            currentWidth : 0,
            marqueeStyle:{
            '--contentWidth' : '0px'
            },
            marqueeStyleClass:['inClass','marqueeAnimation']
        }
    },
    watch: {
        value: {
            handler(val) {               
              this.cal();
            },
            deep: true
        },
        content: {
            handler(val) {               
              this.cal();
            },
            deep: true
        },
    },
    mounted(){
        this.cal();           
    },
    updated(){
        this.cal();
    },
    methods:{
         resetAnimation(){
            Vue.set(this.marqueeStyleClass,1,'') 
            setTimeout(()=>{
                Vue.set(this.marqueeStyleClass,1,'marqueeAnimation')
            },100) 
        },
        cal(){                
            let outWidth = this.$refs.out.clientWidth;
            let inWidth = 0
            if(this.isExceeded){
                inWidth = this.$refs.in.clientWidth/2;
            }else{
                inWidth = this.$refs.in.clientWidth;
            }
            this.isExceeded = outWidth < inWidth;
            this.marqueeStyle['--contentWidth'] = `-${inWidth}px`

            if(this.currentWidth != inWidth){
                this.currentWidth = inWidth;
                this.resetAnimation();                   
            }

            //console.log(`${this.content} --- outWidth${outWidth} --- inWidth:${inWidth}` )
            //console.log('this.isExceeded',this.isExceeded)
        }
    },
}
</script>
<style scoped>
	.outClass {
        width: 100%;
        height: 100%;	
        overflow: hidden;	
	}
    .inClass{          
        display: inline-block;
        white-space:nowrap;               
    }

    .marqueeAnimation{
        animation: 5s wordsLoop linear infinite normal;
    }

    @keyframes wordsLoop {
        0% {
            transform: translateX(0);
            -webkit-transform: translateX(0);
        }
        100% {
            transform: translateX(var(--contentWidth));
            -webkit-transform: translateX(var(--contentWidth));
        }
    }

    @-webkit-keyframes wordsLoop {
        0% {
            transform: translateX(0);
            -webkit-transform: translateX(0);
        }
        100% {
            transform: translateX(var(--contentWidth));
            -webkit-transform: translateX(var(--contentWidth));
        }
    }

</style>
